<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting :field="field" :setting="{name: $t('common.form.type.textarea')}" :disabled="true"></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          :disabled="true"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';

import { FORM_FIELD_TEXTAREA_MAX_LENGTH } from '@src/model/const/Number.ts';
/* enum */
import TableNameEnum from '@model/enum/TableNameEnum.ts';

export default {
  name: 'remark-service-remark-setting',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    maxLength() {
      return FORM_FIELD_TEXTAREA_MAX_LENGTH;
    },
    // 是否是附加组件表单
    isTaskCardForm() {
      return (
        [
          TableNameEnum.TaskCard,
          TableNameEnum.CustomerCard,
          TableNameEnum.ProductCard,
        ].indexOf(this.mode) > -1
      );
    },
  },
  methods: {
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
  },
};
</script>
